/**
 * Created by ysl on 2017/9/1.
 * @description 下拉菜单栏
 *
 * 属性：
 * isShow 用于确定是否显示下拉菜单
 * leftText 左侧菜单名称 middleText 中间菜单名称 rightText右侧菜单名称
 * list 每次要显示的list数据，根据点击标题栏不同传入不同的list
 * leftClick 左侧点击事件 middleClick中间点击事件  rightClick右侧点击事件
 * renderItem 点击下拉菜单后返回的数据 有参数传入（item）
 * currnetDirection 当前点击的菜单栏
 * mytop下拉菜单距顶部的距离
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Modal,
    Dimensions,
    TouchableOpacity,
    Alert,
    TouchableWithoutFeedback,
} from 'react-native';
import FlatListExample from './NormalList/FlatListExample';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

const {height, width} = Dimensions.get('window')

const LEFT = 1, MIDDLE = 2, RIGHT = 3;

export class MenuModel extends Component {

// propTypes用于验证转入的props，当向 props 传入无效数据时，JavaScript 控制台会抛出警告
    static propTypes = {
        isShow: React.PropTypes.bool.isRequired,
        leftText: React.PropTypes.string.isRequired,
        middleText: React.PropTypes.string.isRequired,
        rightText: React.PropTypes.string.isRequired,
        list: React.PropTypes.array.isRequired,
        leftClick: React.PropTypes.func.isRequired,
        middleClick: React.PropTypes.func.isRequired,
        rightClick: React.PropTypes.func.isRequired,
        renderItem: React.PropTypes.func.isRequired,
        currnetDirection: React.PropTypes.number.isRequired,
        mytop: React.PropTypes.number.isRequired,
    }


    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {

            middleList: ['全部到站', '惊雁宫', '星星峡谷', '秦岭神树', '七星鲁王宫', '西沙海底墓'],
        };
    }


    getChooseIcon(direction) {

        if (direction == this.props.currnetDirection && this.props.isShow)
            return "caret-down";
        else
            return "caret-left";


    }


    render() {
        console.log("isShow  " + this.props.isShow)

        return (<View style={styles.container}>

            <View style={styles.top}>

                <TouchableWithoutFeedback onPress={this.props.leftClick}>
                    <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                        <Text style={styles.txt}>{this.props.leftText}</Text>
                        <FontAwesome size={20} name={this.getChooseIcon(LEFT)} color="#ff5d5d5d"/>
                    </View>
                </TouchableWithoutFeedback>

                <TouchableWithoutFeedback onPress={this.props.middleClick}>
                    <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                        <Text style={styles.txt}>{this.props.middleText}</Text>
                        <FontAwesome size={20} name={this.getChooseIcon(MIDDLE)} color="#ff5d5d5d"/>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={this.props.rightClick}>
                    <View style={{flexDirection: 'row', justifyContent: 'center', marginRight: 10,}}>
                        <Text style={styles.txt}>{this.props.rightText}</Text>
                        <FontAwesome size={20} name={this.getChooseIcon(RIGHT)} color="#ff5d5d5d"/></View>
                </TouchableWithoutFeedback>
            </View>

            <Modal
                style={styles.models}
                transparent={true}
                visible={this.props.isShow}
                animationType={'fade'}
                onRequestClose={this.props.leftClick}
            >
                <TouchableWithoutFeedback
                    onPress={this.props.leftClick}
                >

                    <View style={{
                        flex: 1,
                        justifyContent: 'center',
                        flexDirection: "column",
                        paddingTop: this.props.mytop,
                    }}>
                        <FlatListExample
                            style={styles.listView}
                            list={this.props.list}
                            renderItem={this.props.renderItem}
                            numColumns={1}//设置每行item的个数
                            itemHight={120}//设置每个item的高度
                            ItemSeparatorComponent={() => this._separator()}//设置item的分割线
                        />
                    </View>

                </TouchableWithoutFeedback>

            </Modal>
        </View>);
    }

    _separator() {
        return <View style={{height: 2, backgroundColor: '#fff'}}/>;
    }

    renderItem(item) {

        return <View style={styles.item}>
            <TouchableOpacity onPress={() => {
                Alert.alert('' + item.item);
                this.setState({
                    isShow: !this.state.isShow,
                });
            }}>

                <Text style={{fontSize: 16, alignSelf: 'center'}}> {item.item}</Text>
            </TouchableOpacity>
        </View>
    }
}

const styles = StyleSheet.create({

    container: {
        justifyContent: "center",
        flexDirection: 'column',
        flexWrap: 'nowrap',
        backgroundColor: "#ebecf1",
    },
    top: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        position: 'relative',

    },
    top1: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        marginTop: 45,
    },
    listview: {
        width: width,
        justifyContent: "center",
        alignSelf: 'center',
    },
    item: {
        width: width,
        height: 40,
        justifyContent: 'center',
        flexDirection: 'column',
    },
    models: {
        flex: 1,
        justifyContent: 'center',
        flexDirection: "column",
        position: 'relative',
        marginTop: 50,
    },

    txt: {
        fontSize: 13,
        marginBottom: 10,
        marginLeft: 10,
        marginRight: 10,
    },
})


